<template>
    <el-form-item label="默认值" prop="defaultValue">
        <el-time-picker 
            v-if="selectWidget.type === 'time'"
            v-model="optionModel.defaultValue"
            :format="formatTime"
            :value-format="valFormatTime"
            @change="handleTime"
        />
        <el-time-picker
            v-else-if="selectWidget.type === 'time-range'"
            is-range
            v-model="optionModel.defaultValue"
            range-separator="-"
            start-placeholder=""
            end-placeholder=""
            :format="formatTime"
            :value-format="valFormatTime"
            @change="handleTimeRange"
        />
        <el-date-picker
            v-else-if="selectWidget.type === 'date'"
            v-model="optionModel.defaultValue"
            :type="type"
            :format="format"
            :value-format="valFormat"
            @change="handleDateRange"
        />
        <el-date-picker
            v-else-if="selectWidget.type === 'date-range'"
            v-model="optionModel.defaultValue"
            :type="type"
            range-separator="-"
            start-placeholder=""
            end-placeholder=""
            :format="format"
            :value-format="valFormat"
            @change="handleDateRange"
        />
        <el-switch 
            v-else-if="selectWidget.type === 'switch'"
            v-model="optionModel.defaultValue"
            @change="handleSwitch"
        />
        <el-input
            v-else
            v-model="optionModel.defaultValue"
            @blur="handleBlur"
        />
    </el-form-item>
</template>

<script setup>
import { nextTick,computed } from 'vue';

defineOptions({
    name:"defaultValue-editor"
})
const props = defineProps({
    optionModel:{
        type:Object,
        default:()=>({})
    },
    selectWidget:{
        type:Object,
        default:()=>({})    
    },
    designer:{
        type:Object,
        default:()=>({})    
    },
})
const type = computed(()=>props.selectWidget.options.type)

const format = computed(()=> {
    if(props.selectWidget.options.type === 'datetimerange'){
        return   'YYYY-MM-DD HH:mm:ss'
    }
    if(props.selectWidget.options.type === 'monthrange'){
        return 'YYYY-MM'
    }
    return props.selectWidget.options.format
})
const valFormat = computed(()=>{
    if(props.selectWidget.options.type === 'datetimerange'){
        return   'YYYY-MM-DD HH:mm:ss'
    }
    if(props.selectWidget.options.type === 'monthrange'){
        return 'YYYY-MM'
    }
    return props.selectWidget.options.valueFormat
})

const formatTime = computed(()=> props.selectWidget.options.format)
const valFormatTime = computed(()=>props.selectWidget.options.valueFormat)

const handleBlur = ()=>{
    const setFieldVal = props.designer.getCurFieldFunById(props.selectWidget.id)
    
    if(props.selectWidget.type ==='checkbox' || (props.selectWidget.type ==='select' && props.optionModel.multiple)){
        // 处理默认数组情况
        if(!Array.isArray(props.optionModel.defaultValue)){
            props.optionModel.defaultValue = props.optionModel.defaultValue.split(',')
        }
        // 处理多选下拉列表删除情况下，存在空字符串情况
        if(
            props.selectWidget.type ==='select' && props.optionModel.defaultValue.length>0&&props.optionModel.defaultValue[0]==''){
                props.optionModel.defaultValue = []
        }
    }
    nextTick(()=>{
        setFieldVal(props.optionModel.defaultValue)
    })
}

const handleSetVal = val=>{
    const setFieldVal = props.designer.getCurFieldFunById(props.selectWidget.id)
    nextTick(()=>{
        setFieldVal(val)
    }) 
}

const handleTime = (v)=>{
    handleSetVal(props.optionModel.defaultValue)
}

const handleTimeRange = ()=>{
    handleSetVal(props.optionModel.defaultValue)
}

const handleDateRange = ()=>{
    handleSetVal(props.optionModel.defaultValue)
}

const handleSwitch = (v)=>{
    handleSetVal(props.optionModel.defaultValue)
}
</script>

<style lang='scss' scoped></style>